<template>
  <div>
    <el-row v-if="type == 1" type="flex" justify="end" align="right">
      <!-- 客户时搜索条件 -->
      <job-shop
        v-model="filters.storeId"
        placeholder="所属门店"
        size="small"
        style=""
      />
      <el-select
        clearable
        v-model="filters.memberLevelDictId"
        placeholder="会员等级"
        size="small"
      >
        <el-option
          v-for="item in dict['客户会员等级']"
          :key="item.index"
          :value="item.value"
          :label="item.text"
        />
      </el-select>
      <el-select
        clearable
        v-model="filters.clientType"
        placeholder="客户类型"
        size="small"
      >
        <el-option
          v-for="item in dict['客户类型']"
          :key="item.index"
          :value="item.value"
          :label="item.text"
        />
      </el-select>
      <el-input
        class="inputCalss"
        clearable
        size="small"
        v-model="filters.clientNameAndPhone"
        placeholder="请输入客户姓名/手机号"
      />
      <el-button
        icon="el-icon-search"
        type="primary"
        size="small"
        @click="search"
        >搜索</el-button
      >
    </el-row>
    <data-table
      ref="roleTable"
      :value="tableData"
      :has-action="true"
      :table-column-attributes="tableColumnAttributes"
      :width="160"
      :isShowPage="true"
      :isShowSelection="true"
      :hasAction="false"
      :totalCount="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @selection-change="selectionChange"
    ></data-table>
    <div style="text-align: center">
      <el-button type="primary" @click="selectOnClick">确定</el-button>
    </div>
  </div>
</template>
<script>
import baseMixin from '@/mixins/base'
import { userPage } from '@/api/after-sale/personnel/index'
import { clientList } from '@/api/after-sale/client/client' //获取客户
import { getfindClientIds } from '@/api/after-sale/client/car' //获取保险到期
import { getAnewVisitfindClientIds } from '@/api/after-sale/client/anewVisit' //获取工单完成未回访客户
import { JobShop } from '@/components/index'
import { getDict } from '@/utils'
export default {
  components: {
    JobShop,
  },
  mixins: [baseMixin({})],
  props: {
    type: {
      type: Number,
      require: true,
    },
    checkList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      dict: {},
      filters: {
        storeId: '', //所属门店
        memberLevelDictId: '', //会员等级
        clientType: '', //客户类型
        clientNameAndPhone: '', //手机号或姓名
      }, //搜索条件
      //table字段
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '客户名称', value: 'clientName', type: 'text' },
        { name: '手机号', value: 'phone', type: 'text' },
        { name: '驾驶证号', value: 'jszNum', type: 'text' },
        { name: '性别', value: 'genderCst', type: 'text' },
        { name: '会员等级', value: 'memberLevelDictValue', type: 'text' },
        { name: '客户来源', value: 'clientSource', type: 'text' },
        { name: '客户类型', value: 'clientType', type: 'text' },
      ],
      sleect: [],
    }
  },
  watch: {
    tableData: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          //设置表格的选中状态 延时5毫秒等待表格渲染完成
          this.filterData(newVal).forEach((row) => {
            console.log(this.$refs.roleTable.$refs.multipleTable)
            this.$refs.roleTable.$refs.multipleTable.toggleRowSelection(
              row,
              true
            )
          })
        }, 300)
      },
      deep: true,
    },
  },
  methods: {
    checkFunction() {
      switch (this.type) {
        case 1:
          return clientList
          break
        case 2:
          return getfindClientIds
          break
        case 3:
          return getAnewVisitfindClientIds
          break
      }
    },
    //搜索条件
    search() {
      this.searchOptions = this.filters
      this.currentPage = 1
      this.checkFunction()(this.searchOptions).then((res) => {
        let { success, data } = res
        if (this.type == 1) {
          if (success) {
            let { content, totalRecords } = data
            this.tableData = content
            this.totalCount = Number(totalRecords)
          }
        } else {
          if (success) {
            this.tableData = data ? data : []
            this.totalCount = Number(data.length)
          }
        }
      })
    },
    //过滤选中的数据
    filterData(data) {
      return data.filter((item) => {
        for (let index = 0; index < this.checkList.length; index++) {
          if (item.id == this.checkList[index]) {
            return item
          }
        }
      })
    },
    selectOnClick() {
      if (this.sleect.length == 0) {
        this.$message.error('请至少选择一条数据')
        return
      }
      this.$emit('roleIdListSelectCheck', this.sleect)
    },
    selectionChange(sleect, row) {
      this.sleect = sleect
    },
  },
  created() {
    this.dict = getDict(['客户类型', '客户会员等级'], '', true)
    this.search()
  },
}
</script>
<style lang="scss" scoped>
.inputCalss {
  width: 150px;
}
</style>